<template>
    <div>
        <div class="enterprise-review-tabs">
            <a-tabs type="card" v-model:activeKey="activeKey" @change="activeChange">
                <a-tab-pane key="物料目录" tab="物料目录"></a-tab-pane>
                <a-tab-pane key="物料库存" tab="物料库存"></a-tab-pane>
                <a-tab-pane key="物料统计" tab="物料统计"></a-tab-pane>
            </a-tabs>
        </div>
        <div v-if="activeKey == '物料目录'">
            <commpVxeTable
                :key="refreshTable"
                ref="headmanVxeTable"
                :config="{
                    api:assessCheckApi.currentqueryWlmlPageList,
                    rowId: 'id',
                    paramet:{
                        fqyid:formState.id
                    }
                }" 
                :isCanWrap="true"
                :columns="directoryColumnsVxe" 
                :formItem="directoryFormItem"
                :occupancyHeight="140"
            > 
                <template v-slot:externalOperations="{data}" v-if="!formState.isDisabled">
                    <vxe-form-item>
                        <template>
                            <a-button class="blue-btn" type="primary" @click="addClick(0)">新增</a-button>
                        </template>
                    </vxe-form-item>
                </template>
                <template v-slot:sfgq_name="{row}">
                    <span v-if="row.sfgq == '长期有效'" style="color: #91cc75;">长期有效</span>
                    <span v-if="row.sfgq == '未过期'" style="color: #5470c6;">未过期</span>
                    <span v-if="row.sfgq == '即将过期'" style="color: #fac858;">即将过期</span>
                    <span v-if="row.sfgq == '已过期'" style="color: #ee6666;">已过期</span>
                </template>
                <template v-slot:operation_btn="{row}" data-desc="自定操作栏">
                    <a-form layout="inline" class="search-form" >
                        <a-form-item v-if="!formState.isDisabled">
                            <a-button class="blue-btn" type="primary" @click="editClick(row,0)" >编辑</a-button>
                        </a-form-item>
                        <a-form-item v-else>
                            <a-button class="blue-btn" type="primary" @click="editClick(row,0,'查看')" >查看</a-button>
                        </a-form-item>
                        <a-form-item v-if="!formState.isDisabled">
                            <a-button class="red-btn" type="primary" @click="deleteClick(row,0)" >删除</a-button>
                        </a-form-item>
                    </a-form> 
                </template>
            </commpVxeTable>
        </div>
        <div v-if="activeKey == '物料库存'">
            <commpVxeTable
                :key="refreshTable"
                ref="headmanVxeTable"
                :config="{
                    api:assessCheckApi.spcyQyInfoqueryWlkcPageList,
                    rowId: 'id',
                    paramet:{
                        fqyid:formState.id
                    }
                }" 
                :isCanWrap="true"
                :columns="inventoryColumnsVxe" 
                :formItem="inventoryFormItem"
                :occupancyHeight="140"
            > 
                <template v-slot:externalOperations="{data}" v-if="!formState.isDisabled">
                    <vxe-form-item>
                        <template>
                            <a-button class="blue-btn" type="primary" @click="addClick(1)">新增</a-button>
                        </template>
                    </vxe-form-item>
                </template>
                <template v-slot:sfgq_name="{row}">
                    <span v-if="row.sfgq == '长期有效'" style="color: #91cc75;">长期有效</span>
                    <span v-if="row.sfgq == '未过期'" style="color: #5470c6;">未过期</span>
                    <span v-if="row.sfgq == '即将过期'" style="color: #fac858;">即将过期</span>
                    <span v-if="row.sfgq == '已过期'" style="color: #ee6666;">已过期</span>
                </template>
                <template v-slot:operation_btn="{row}" data-desc="自定操作栏">
                    <a-form layout="inline" class="search-form" >
                        <a-form-item v-if="!formState.isDisabled">
                            <a-button class="blue-btn" type="primary" @click="editClick(row,1)" >编辑</a-button>
                        </a-form-item>
                        <a-form-item> 
                            <a-button class="blue-btn" type="primary" @click="recordClick(row,1)" >出入库记录</a-button>
                        </a-form-item>
                        <a-form-item v-if="!formState.isDisabled">
                            <a-button class="red-btn" type="primary" @click="deleteClick(row,1)" >删除</a-button>
                        </a-form-item>
                    </a-form> 
                </template>
            </commpVxeTable>
            
        </div>
        <div v-if="activeKey == '物料统计'">
            <commpVxeTable
                :key="refreshTable"
                ref="headmanVxeTable"
                :config="{
                    api:assessCheckApi.spcyQyInfoQueryWlStatList,
                    rowId: 'id',
                    paramet:{
                        fqyid:formState.id
                    }
                }" 
                :isCanWrap="true"
                :columns="materialStatisColumnsVxe" 
                :formItem="materialStatisFormItem"
                :occupancyHeight="100"
            > 
            </commpVxeTable>
        </div>
        <materiaAddEdit0 ref="materiaAddEditRef0" @addItem="addItem" @editItem="editItem"/>
        <materiaAddEdit1 ref="materiaAddEditRef1" @addItem="addItem" @editItem="editItem"/>
        <inventoryRecords ref="inventoryRecordsRef" />
    </div>
</template>
<script>
import assessCheckApi from '../service/api'
import {
    spcyQyInfoupdateWlml,
    spcyQyInfodeleteWlml,
    spcyQyInfoaddWlml,
    spcyQyInfoaddWlkc,
    spcyQyInfodeleteWlkc,
    spcyQyInfoupdateWlkc,
} from '../service/index'
import commpVxeTable from '@/components/commp-vxe-table/commp-vxe-table.vue'
import materiaAddEdit0 from './materiaAddEdit0.vue'
import materiaAddEdit1 from './materiaAddEdit1.vue'
import inventoryRecords from './inventoryRecords.vue'
export default {
    components:{
        commpVxeTable,
        materiaAddEdit0,
        materiaAddEdit1,
        inventoryRecords,
    },
    props:{

    },
    data(){
        return{
            assessCheckApi:assessCheckApi,
            formState:{},
            activeKey:'物料目录',
            refreshTable:null,
            directoryFormItem:[{
                label: '物料名称',
                model: 'fwlmc',
            },{
                label: '物料编号',
                model: 'fwlbh',
            }],
            directoryColumnsVxe:[{ 
                type: 'checkbox', 
                width: 60 ,
                fixed: 'left'
            },{
                title: '物料编号',
                field: 'fwlbh',
            },{
                title: '物料名称',
                field: 'fwlmc',
            },{
                title: '物料等级',
                field: 'fwldj',
            },{
                title: '通用名称',
                field: 'ftymc',
            },{
                title: '规格',
                field: 'fgg',
            },{
                title: '数量单位',
                field: 'fsldw',
            },{
                title: '最小阈值',
                field: 'fzxyz',
            },{
                title: '操作',
                field: 'id',
                slots: {
                    // 使用插槽模板渲染
                    default: 'operation_btn',
                },
                width:180,
                fixed:'right'
            }],
            inventoryFormItem:[{
                label: '物料名称',
                model: 'fwlmc',
            },{
                label: '物料分类',
                model: 'fwlfl',
            }],
            inventoryColumnsVxe:[{ 
                type: 'checkbox', 
                width: 60 ,
                fixed: 'left'
            },{
                title: '入库批号',
                field: 'frkph',
            },{
                title: '物料编号',
                field: 'fwlbh',
            },{
                title: '物料名称',
                field: 'fwlmc',
            },{
                title: '物料分类',
                field: 'fwlfl',
            },{
                title: '规格',
                field: 'fgg',
            },{
                title: '库存数量',
                field: 'fkcsl',
            },{
                title: '数量单位',
                field: 'fsldw',
            },{
                title: '经销商名称',
                field: 'fjxsmc',
            },{
                title: '库存有效期',
                field: 'fyxq',
            },{
                title: '入库时间',
                field: 'frksj',
            },{
                title: '操作',
                field: 'id',
                slots: {
                    // 使用插槽模板渲染
                    default: 'operation_btn',
                },
                width:295,
                fixed:'right'
            }],
            materialStatisFormItem:[{
                label: '物料编号',
                model: 'fwlbh',
            },{
                label: '物料名称',
                model: 'fwlmc',
            },{
                label: '经销商名称',
                model: 'fjxsmc',
            },{
                label: '操作类型',
                model: 'frcklx',
                type:'Select',
                options:[{
                    label:'购进',
                    value:'购进'
                },{
                    label:'使用',
                    value:'使用'
                },{
                    label:'取样',
                    value:'取样'
                },{
                    label:'耗损',
                    value:'耗损'
                }]
            },{
                label: '操作人',
                model: 'fczrxm',
            },{
                label: '操作开始时间',
                model: 'startTime',
                type: 'datePicker',
                format: 'YYYY-MM-DD'
            },{
                label: '操作结束时间',
                model: 'endTime',
                type: 'datePicker',
                format: 'YYYY-MM-DD'
            }],
            materialStatisColumnsVxe:[{
                title: '物料编号',
                field: 'fwlbh',
            },{
                title: '物料名称',
                field: 'fwlmc',
            },{
                title: '经销商名称',
                field: 'fjxsmc',
            },{
                title: '操作类型',
                field: 'frcklx',
            },{
                title: '操作人',
                field: 'fczrxm',
            },{
                title: '操作数量',
                field: 'fczsl',
            },{
                title: '库存量',
                field: 'fkcsl',
            },{
                title: '单位',
                field: 'fsldw',
            },{
                title: '操作时间',
                field: 'fczsj',

            },{
                title: '入库批号',
                field: 'frkph',
            },{
                title: '入库时间',
                field: 'frksj',
            }],
            methodList:[{
                name:'物料目录',
                editName:spcyQyInfoupdateWlml,
                deleteName:spcyQyInfodeleteWlml,
                addName:spcyQyInfoaddWlml,
            },{
                name:'物料库存',
                editName:spcyQyInfoupdateWlkc,
                deleteName:spcyQyInfodeleteWlkc,
                addName:spcyQyInfoaddWlkc,
            },]
            
        }
    },
    watch:{

    },
    mounted(){
        
    },
    methods:{
        activeChange(){
            this.refreshTable = Date.now()
        },
        getData(row){
            //console.log('物料管理',row)
            this.formState = row
            this.refreshTable = Date.now()
        },
        addClick(index){
            let refName = 'materiaAddEditRef'+index
            this.$refs[refName].getData({fqyid:this.formState.id,index:index})
            this.$refs[refName].visible = true
        },
        editClick(val,index,view){
            //console.log(val)
            let refName = 'materiaAddEditRef'+index
            this.$refs[refName].getData({fqyid:this.formState.id,...val,index:index,view:view?true:false})
            this.$refs[refName].visible = true
        },
        addItem(val,vis,isTip){
            //console.log('新增',val)
            let refName = 'materiaAddEditRef'+val.index
            this.methodList[val.index].addName(val).then(res=>{
                if(res.code == 200){
                    this.refreshTable = Date.now()
                    if(!isTip){
                        this.$message.success(res.message)
                    }
                    
                    this.$refs[refName].getData({fqyid:this.formState.id,...res.result,index:val.index})
                    this.$refs[refName].visible = vis
                    //console.log(res)
                }else{
                    this.$message.warning(res.message)
                }
            })
        },
        editItem(val,vis){
            //console.log('编辑',val)
            let refName = 'materiaAddEditRef'+val.index
            this.methodList[val.index].editName(val).then(res=>{
                if(res.code == 200){
                    this.refreshTable = Date.now()
                    this.$message.success(res.message)
                    this.$refs[refName].visible = vis
                }else{
                    this.$message.warning(res.message)
                }
            })
        },
        recordClick(val){
            //console.log(val)
            this.$refs.inventoryRecordsRef.getData({fqyid:this.formState.id,...val,index:-1})
            this.$refs.inventoryRecordsRef.visible = true
        },
        deleteClick(val,index){
            var that = this
            this.$confirm({
                title:'您确认要删除吗？',
                // icon: createVNode(ExclamationCircleOutlined),
                onOk() {
                    that.methodList[index].deleteName({ids:val.id}).then(res=>{
                        if(res.code == 200){
                            that.$message.success('删除成功')
                            that.refreshTable = Date.now()
                        }else{
                            that.$message.warning(res.message)
                        }
                    })
                },
                
            });
        },
    }
}
</script>
<style lang="less">
.enterprise-review-tabs{
    // width: 100%;
    padding: 0 5px;
    background-color: #fff;
    position: relative;
    // top: 48px;
    top: 0;
    right: 0;
    // margin:0 10px;
    font-size: 20px !important;
    font-weight: 600 !important;
    .ant-tabs-bar{
        margin: 0;
    }
    .ant-tabs-nav .ant-tabs-tab{
        padding-top: 5px;
        padding-bottom: 5px;
        margin-right: 10px;
    }
    .ant-tabs-nav-container{
        height: 50px !important;
    }
    .ant-tabs-nav-scroll{
        padding-top: 10px;
        padding-left: 10px;
    }
    .ant-tabs-tab-active{
        font-size: 16px;
        font-weight: 600 !important;
    }
    .ant-tabs-tab{
        font-size: 16px;
        font-weight: 600 !important;
        line-height: 40px !important;
        border-radius: 10px 10px 0 0 !important;
    }
    .ant-tabs-tab-active{
        background-color: #5ca3e5 !important;
        color: #fff !important;
        border-color: #5ca3e5 !important;
        box-shadow: 0px 0px 12px 0px #5ca3e5;
    }
    .ant-tabs-tab-prev.ant-tabs-tab-arrow-show,.ant-tabs-tab-next.ant-tabs-tab-arrow-show{
        border: 1px solid #5ca3e5;
        border-radius: 10px;
        height: 40px;
        margin-top: 10px;
    }
    .ant-tabs-tab-prev-icon-target,.ant-tabs-tab-next-icon-target{
        font-size: 16px;
        color: #5ca3e5;
    }
}
</style>